<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="帖子管理" name="first">
        <div class="monitorTop">
          <el-tabs type="border-card" @tab-click="changeStatus">
            <el-tab-pane v-for="sItem in status" :key="sItem.id" :label="sItem.name">
              <el-empty :image-size="200" v-if="article.length==0"></el-empty>
              <div v-for="aItem in article" :key="aItem.pId" v-else>
                <ArticleCard :attrs='aItem'></ArticleCard>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-tab-pane>
      <el-tab-pane label="草稿管理" name="second">
        <el-empty :image-size="200" v-if="article.length==0"></el-empty>
        <div v-for="cItem in article" :key="cItem.pId" v-else>
          <ArticleCard :attrs='cItem'></ArticleCard>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import ArticleCard from './ArticleCard.vue'
export default {
  components:{
    ArticleCard
  },
  data () {
    return {
      status:[
        {
          id:1,
          name:"进行中"
        },
        {
          id:2,
          name:"已通过"
        },
        {
          id:3,
          name:"未通过"
        }
      ],
      activeName: 'first',
      article:[],
      userInfo:{}
    }
  },
  created(){
    this.getUserInfo();
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
      if(tab.name="second"){
        this.getPostMes(-1,this.userInfo.uId)
      }

    },
    changeStatus(el){
      let status = parseInt(el.index)+1;
      console.log(status)
      this.getPostMes(status,this.userInfo.uId)
    },
    // 获取用户信息
    getUserInfo () {
      const params = {}
      console.log(this.cookies.getToken('X-Token'))
      if (this.cookies.getToken('X-Token') != undefined) {
        params.token = this.cookies.getToken('X-Token')
        this.$axios.getUserInfo(params).then(res => {
          console.log(res)
          this.userInfo = res.data
          this.getPostMes(1,res.data.uId)
        })
        console.log(this.userInfo)
      } else {
        this.$router.push('/')
      }
    },
    // 查询帖子
    getPostMes (status,uId) {
      const params = {}
      // params.token = this.cookies.getToken('X-Token')
      params.uId = uId
      params.status = status
      console.log(params)
      this.$axios.selectPostMesByuId(params).then(res => {
        console.log(res)
        this.article = res.data.rows
      })
    }
  }
}
</script>
<style scoped>
.monitorTop .el-tabs__item {
  font-size: 10px !important;
}
</style>
